<template>
  <div class="warp">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="备件" name="first">
        <div>
          <template>
            <div>
              <el-row :gutter="15">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium " label-width="10px">
                  <!-- 备件名称 -->
                  <el-col :span="5">
                    <el-form-item label-width="70px" label="备件名称" prop="field102">
                      <el-input v-model="formData.field102" placeholder="请输入备件名称" clearable :style="{ width: '100%' }">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 代号/规格/图号 -->
                  <el-col :span="5">
                    <el-form-item label-width="100px" label="代号/规格/图号" prop="field102">
                      <el-input v-model="formData.field102" placeholder="请输入代号/规格/图号" clearable
                        :style="{ width: '100%' }">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 设备名称/型号/厂商 -->
                  <el-col :span="6">
                    <el-form-item label-width="130px" label="设备名称/型号/厂商" prop="field102">
                      <el-input v-model="formData.field102" placeholder="请输入设备名称/型号/厂商" clearable
                        :style="{ width: '100%' }">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 申请船舶 -->
                  <el-col :span="5">
                    <el-form-item prop="field101" label-width="70px" label="申请船舶">
                      <el-select v-model="formData.field101" placeholder="请选择申请船舶" clearable :style="{ width: '100%' }">
                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 申请部门 -->
                  <el-col :span="5">
                    <el-form-item prop="field101" label-width="70px" label="申请部门">
                      <el-select v-model="formData.field101" placeholder="请选择申请部门" clearable :style="{ width: '100%' }">
                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 紧急程度 -->
                  <el-col :span="5">
                    <el-form-item prop="field101" label-width="70px" label="紧急程度">
                      <el-select v-model="formData.field101" placeholder="请选择紧急程度" clearable :style="{ width: '100%' }">
                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 计划属性 -->
                  <el-col :span="5">
                    <el-form-item prop="field101" label-width="60px" label="计划属性">
                      <el-select v-model="formData.field101" placeholder="请选择计划属性" clearable :style="{ width: '100%' }">
                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 申请日期 -->
                  <el-col :span="6">
                    <el-form-item label-width="70px" label="申请日期" prop="field103">
                      <el-date-picker type="daterange" v-model="formData.field103" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" :style="{ width: '100%' }" start-placeholder="开始日期"
                        end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <!-- 申请单号/名称 -->
                  <el-col :span="5">
                    <el-form-item label-width="100px" label="申请单号/名称" prop="field102">
                      <el-input v-model="formData.field102" placeholder="请输入申请单号/名称" clearable
                        :style="{ width: '100%' }">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 关键字 -->
                  <el-col :span="5">
                    <el-form-item label-width="60px" label="关键字" prop="field102">
                      <el-input v-model="formData.field102" placeholder="请输入关键字" clearable :style="{ width: '100%' }">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 按物品排序（合并同类项） -->
                  <el-col :span="5">
                    <el-form-item prop="field101" label-width="80px" label="按物品排序">
                      <el-select v-model="formData.field101" placeholder="按物品排序（合并同类项）" clearable
                        :style="{ width: '100%' }">
                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>

              <el-row :gutter="15" class="layout-items-center">
                <el-col :span="3">
                  <el-button size="medium " type="primary" @click="submitForm">提交</el-button>
                  <el-button size="medium " @click="resetForm">重置</el-button>
                </el-col>
                <el-col :span="2.5">
                  <el-button type="primary" plain size="medium ">
                    自动询价
                  </el-button>
                </el-col>
                <el-col :span="2.5">
                  <el-button size="medium " icon="el-icon-edit">
                    自定义筛选
                  </el-button>
                </el-col>
                <el-col :span="4">
                  <el-checkbox v-model="checked">仅显示关键备件</el-checkbox>
                </el-col>
                <div>
                  <el-radio v-model="radio" label="1">组合询价</el-radio>
                  <el-radio v-model="radio" label="2">按单询价</el-radio>
                </div>
              </el-row>
              <el-table :data="tableData" class="plan-table" style="width: 100%; margin: 20px 0" max-height="600" border
                @selection-change="handleSelectionChange">
                <el-table-column fixed type="selection" width="55">
                </el-table-column>
                <el-table-column fixed prop="date" label="备件名称" min-width="150">
                </el-table-column>
                <el-table-column fixed prop="name" label="代号/规格/图号" min-width="120">
                </el-table-column>
                <el-table-column prop="city" label="设备名称/型号/厂商" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="备件描述" min-width="130">
                </el-table-column>
                <el-table-column prop="zip" label="申请供船日期" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="数量" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="申请船舶" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="申请部门" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="申购信息" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="紧急程度" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="计划属性" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="申请日期" min-width="120">
                </el-table-column>
                <el-table-column prop="zip" label="申请单号/名称" min-width="120">
                </el-table-column>
                <el-table-column label="全部取消" fixed="right" min-width="120">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                      移除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block layout-justify-end">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
                  :page-sizes="[100, 200, 300, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
            </div>
          </template>
        </div>
      </el-tab-pane>
      <el-tab-pane label="物料" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="油料" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="海图" name="four">角色管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio: "1",
        activeName: "first",
        formData: {
          field101: undefined,
          field102: undefined,
          field103: undefined,
          field105: undefined,
          field106: [1],
        },
        rules: {
          field101: [],
          field102: [{
            message: "搜索关键字",
            trigger: "blur",
          }, ],
          field106: [],
        },
        field101Options: [{
            label: "选项一",
            value: 1,
          },
          {
            label: "选项二",
            value: 2,
          },
        ],
        field106Options: [{
          label: "隐藏其他人草稿单",
          value: 1,
        }, ],
        checked: false,
        tableData: [{
            date: "粗滤器(筒装)",
            name: "SBL4011T/363目张家港圣美意",
            province: "设备:燃油供油单元 - HY-02SS-B部件 / 位置号:粗滤器",
            city: "",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-08",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-06",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-07",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-08",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-06",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-07",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-08",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-06",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-07",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
        ],
      };
    },
    created() {},
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      submitForm() {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
        });
      },
      resetForm() {
        this.$refs["elForm"].resetFields();
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleSelectionChange(val) {
        console.log(val);

        this.multipleSelection = val;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .warp {
    margin: 15px;
    padding:15px;
    background: #fff;
    border-radius: 10px;
    height: calc(100vh - 120px);
    overflow: auto;
  }

  ::v-deep .el-tabs__item {
    width: 100px;
    padding: 0;
    text-align: center;
  }

  ::v-deep .el-form-item__label {
    font-size: 12px;
  }

  ::v-deep .el-input__inner {
    padding-right: 10px;
  }

  ::v-deep .el-checkbox__label {
    font-size: 12px;
  }
</style>
